<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        .status {
            padding: 15px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            margin: 10px 0;
        }
        button {
            background: #4facfe;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0099cc;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 静态HTML测试</h1>
        <div class="status">
            <p>✅ HTML页面正常加载</p>
            <p>✅ CSS样式正常应用</p>
            <p id="time-display">时间：</p>
            <button onclick="updateTime()">更新时间</button>
        </div>
        
        <div class="status">
            <p>🌐 网络状态：<span id="network-status">检测中...</span></p>
            <p>📦 Vite服务：<span id="vite-status">检测中...</span></p>
            <button onclick="testNetwork()">测试网络</button>
        </div>
        
        <div class="status">
            <h3>浏览器信息</h3>
            <p id="browser-info"></p>
            <p id="window-size"></p>
        </div>
    </div>

    <script>
        function updateTime() {
            document.getElementById('time-display').textContent = '时间：' + new Date().toLocaleString();
        }
        
        function updateBrowserInfo() {
            document.getElementById('browser-info').textContent = '浏览器：' + navigator.userAgent.split(' ')[0];
            document.getElementById('window-size').textContent = '窗口尺寸：' + window.innerWidth + ' x ' + window.innerHeight;
        }
        
        async function testNetwork() {
            try {
                const response = await fetch('/');
                if (response.ok) {
                    document.getElementById('network-status').textContent = '✅ 正常';
                    document.getElementById('vite-status').textContent = '✅ 正常';
                } else {
                    document.getElementById('network-status').textContent = '❌ 错误';
                }
            } catch (error) {
                document.getElementById('network-status').textContent = '❌ 失败: ' + error.message;
            }
        }
        
        // 页面加载时执行
        updateTime();
        updateBrowserInfo();
        testNetwork();
        
        // 每秒更新时间
        setInterval(updateTime, 1000);
        
        console.log('静态HTML测试页面加载完成');
    </script>
</body>
</html>
